<template>
  <div class="dir-badge" :style="styleObject">
    <v-icon color="white" :icon="isOutbound ? mdiArrowRight : mdiArrowLeft" :size="iconSize" />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { mdiArrowLeft, mdiArrowRight } from '@mdi/js'

interface Props {
  /** 是否外发（我们 -> 客户） */
  isOutbound: boolean
  /** 角标圆的尺寸（像素） */
  size?: number
  /** 箭头图标尺寸（像素） */
  iconSize?: number
  /** 位置：top-right/top-left/bottom-right/bottom-left */
  position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
  /** x/y 偏移（相对边缘，负数更靠外） */
  offsetX?: number
  offsetY?: number
  /** 外发/内收的颜色（Vuetify 主题名） */
  outboundColor?: string
  inboundColor?: string
}

const props = withDefaults(defineProps<Props>(), {
  size: 14,
  iconSize: 12,
  position: 'top-right',
  offsetX: -4,
  offsetY: -4,
  outboundColor: 'warning',
  inboundColor: 'success'
})
const bgColorName = computed(() => (props.isOutbound ? props.outboundColor : props.inboundColor))

const styleObject = computed(() => {
  const base: Record<string, string> = {
    width: `${props.size}px`,
    height: `${props.size}px`,
    backgroundColor: `rgb(var(--v-theme-${bgColorName.value}))`
  }

  // 定位
  switch (props.position) {
    case 'top-right': {
      base.top = `${props.offsetY}px`
      base.right = `${props.offsetX}px`
      break
    }
    case 'top-left': {
      base.top = `${props.offsetY}px`
      base.left = `${props.offsetX}px`
      break
    }
    case 'bottom-right': {
      base.bottom = `${props.offsetY}px`
      base.right = `${props.offsetX}px`
      break
    }
    case 'bottom-left': {
      base.bottom = `${props.offsetY}px`
      base.left = `${props.offsetX}px`
      break
    }
  }

  return base
})
</script>

<style scoped>
.dir-badge {
  position: absolute;
  border-radius: 50%;

  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* 仅作装饰，避免拦截点击 */
}
</style>
